<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Avatar from "./Avatar.svelte";
    import { fn } from "storybook/test";
    import { Space } from "../Space";
    import Icon from "@iconify/svelte";
    import img from "../../assets/avatar.png";
    import { Input } from "../Input";

    const { Story } = defineMeta({
        title: "Components/Base/Avatar",
        component: Avatar,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });
    let str = $state("Name");
</script>

<Story name="Default">
    {#snippet template(args)}
        <Avatar>U</Avatar>
    {/snippet}
</Story>

<Story name="Shape">
    {#snippet template(args)}
        <Avatar>U</Avatar>
        <Avatar shape="square">U</Avatar>
    {/snippet}
</Story>

<Story name="Type">
    {#snippet template(args)}
        <Space dir="h" align="center">
            <Avatar>
                {#snippet icon()}
                    <Icon icon="uil:setting" />
                {/snippet}
            </Avatar>
            <Avatar>A</Avatar>
            <Avatar>Name</Avatar>
            <Avatar src={img} />
            <Avatar style="background-color: rgb(253, 227, 207); color: rgb(245, 106, 0)">U</Avatar>
            <Avatar style="background-color: rgb(253, 227, 207);">
                {#snippet icon()}
                    <Icon icon="uil:setting" />
                {/snippet}
            </Avatar>
        </Space>
    {/snippet}
</Story>

<Story name="Size" args={{ size: 48 }}>
    {#snippet template(args)}
        <Space align="center">
            <Avatar size="small">s</Avatar>
            <Avatar>U</Avatar>
            <Avatar size="large">L</Avatar>
            <Avatar {...args}>{args.size}</Avatar>
        </Space>
    {/snippet}
</Story>

<Story name="Mask" args={{ size: 48 }}>
    {#snippet template(args)}
        <Avatar {...args} style="background-color: rgb(253, 227, 207); color: rgb(245, 106, 0); font-size: 20px">
            {#snippet icon()}
                <Icon icon="uil:setting" />
            {/snippet}
            {#snippet hoverMask()}
                <div style="background-color: var(--cui-color-overlay-bg);color: #fff; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center">
                    <Icon icon="tabler:eye" />
                </div>
            {/snippet}
        </Avatar>
    {/snippet}
</Story>

<Story name="FontSize">
    {#snippet template(args)}
        <Space align="center">
            <Avatar size="large">{str}</Avatar>
            <Input bind:value={str} style="width: 120px;" />
        </Space>
    {/snippet}
</Story>
